<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>tree</title>
    <!--引入zTree的css-->
    <link rel="stylesheet" th:href="@{/system/js/zTree_v3//css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/alllayui/layui/css/layui.css}" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md3 layui-col-xs3 layui-col-sm3"
             style="border-right-style:solid;border-right-width:1px;border-right-color: #cccccc">

            <div class="content_wrap">
                <div class="zTreeDemoBackground left">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 layui-col-xs9 layui-col-sm9">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>资源详情</legend>
            </fieldset>
            <div class="layui-btn-container" id="btnGroup">
                <shiro:hasPermission name="resources/add">
                    <button id="add" class="layui-btn layui-btn-sm" lay-event="add">新增</button>
                </shiro:hasPermission>

                <shiro:hasPermission name="resources/update">
                    <a id="edit" class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
                </shiro:hasPermission>
                <shiro:hasPermission name="resources/delete">
                    <a id="del" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
                </shiro:hasPermission>
            </div>


            <form class="layui-form" action="">
                <input type="hidden" name="id" id="menuId">
                <div class="layui-form-item">
                    <label class="layui-form-label">资源名称</label>
                    <div class="layui-input-block">
                        <input type="text" name='name' id="menuName" readonly="readonly" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">资源id</label>
                    <div class="layui-input-block">
                        <input type="text" name='resKey' id="menuResKey" readonly="readonly" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">资源链接</label>
                    <div class="layui-input-block">
                        <input type="text" name='resUrl' id="menuResUrl" readonly="readonly" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">父资源id</label>
                    <div class="layui-input-block">
                        <input type="text" name='presKey' id="menuPresKey" readonly="readonly" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">父资源名称</label>
                    <div class="layui-input-block">
                        <input type="text" name='pName' id="menuPName" readonly="readonly" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">资源排序</label>
                    <div class="layui-input-block">
                        <input type="text" name='sort' id="menuSort" readonly="readonly" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="text" name='sort' id="menuType" readonly="readonly" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>

<!--引入layer之前需要引入jquery-->
<script th:src="@{/system/js/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/alllayui/layui/layui.js}" charset="utf-8"></script>
<!--引入layer-->
<!--引入zTree-->
<script type="text/javascript" th:src="@{/system/js/zTree_v3/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/system/js/zTree_v3/js/jquery.ztree.excheck.js}"></script>
<script th:inline="javascript">
    var treeJsonStr = [[${treeNodes}]];
    var roleKey = [[${roleKey}]];
    // console.log(treeJsonStr);
    // console.log(roleKey);
    // console.log(coverOtherColumnValueJson);
    var zNodes = JSON.parse(treeJsonStr);
    // console.log(zNodes);
    simpleChooseFun = function (e, treeId, treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var chooseNodes = treeObj.getCheckedNodes(true);
        //获取所有选中的节点
        for (var i = 0; i < chooseNodes.length; i++) {
            //如果当前所有节点的id!=当前节点id
            if (chooseNodes[i].id != treeNode.id) {
                chooseNodes[i].checked = false;
                treeObj.updateNode(chooseNodes[i]);
            }
        }

    }

    var setting = {

        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: zTreeOnClick
        }
    };

    var thisIndex = "layui-tab-content";

    function zTreeOnClick() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = treeObj.getSelectedNodes();
        // console.log("节点id:" + nodes[0].id); //获取选中节点的值
        ajaxGet(nodes[0].id);

    }

    function ajaxGet(id) {
        $.ajax({
            type: "Get",
            url: '/resources/managelist?resKey=' + id,
            cache: false,  //禁用缓存
            dataType: "json",
            success: function (result) {
                resources = result.data;
                var type = "";
                $("#menuName").val(resources.name);
                $("#menuResKey").val(resources.resKey);
                $("#menuResUrl").val(resources.resUrl);
                $("#menuPresKey").val(resources.presKey);
                $("#menuPName").val(resources.pName);
                $("#menuSort").val(resources.sort);
                if (resources.type == 0) {
                    type = "启用";
                } else {
                    type = "禁用";
                }
                $("#menuType").val(type);

            },
            error: function () {
                alert("系统平台名称加载失败");
            }
        });

    }


    /*初始化zTree*/
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        /*$("#confirmBtn").click(function () {
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var chooseNodes = treeObj.getCheckedNodes(true);
            // console.log(chooseNodes[0].id +" : " +chooseNodes[0].name);
            // console.log(chooseNodes[0]);

            var resKeys = "";
            for (var i = 0; i < chooseNodes.length; i++) {
                if (resKeys == "") {
                    resKeys = chooseNodes[i].id;
                } else {
                    resKeys = resKeys + "##" + chooseNodes[i].id;
                }
            }
        });*/
    });

    // 添加点击事件
    $(".layui-btn").click(function () {
        var id = $(this).attr('id');
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = treeObj.getSelectedNodes();
        layui.use("layer", function () {

            // var data = obj.data;
            //console.log(obj)
            if (id === 'del') {
                if (nodes.length > 0) {
                    layer.confirm('真的删除行么', function (index) {
                        $.post("/resources/delete", {"resKey": nodes[0].id}, function (data) {
                            if (data.message == 'SUCCESS') {
                                window.location.reload();
                                layer.msg(data.message);
                            } else {
                                layer.msg(data.message);
                            }

                        }, "json");
                        layer.close(index);
                    });
                } else {
                    alert("请先选择后再进行删除！")
                }
            } else if (id === 'edit') {
                //iframe层-父子操作
                if (nodes.length > 0) {
                    var updateIndex = layer.open({
                        type: 2,
                        area: ['700px', '450px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: '/resources/update?resKey=' + nodes[0].id
                    });
                    layer.full(updateIndex);
                } else {
                    alert("请先选择后再进行编辑！")
                }
            } else if (id === 'add') {
                var addIndex = layer.open({
                    type: 2,
                    area: ['700px', '450px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '/resources/add'
                });
                layer.full(addIndex);
            }
        })
    });

</script>
</html>